﻿// The accordions is a container that contains collapsed panels
define([
    'Wjs/ui/widgets/foundation/ViewMultipleContainer',
    'Wjs/ui/widgets/Panel',
    'Wjs/ui/elements/mixins/Activatable',
    'Wjs/ui/widgets/tools/Tool'
],
function () {
    'use strict';

    return Wjs.defineOnce({

        type: 'Accordion',

        internal: {

            base: Wjs.getType('ViewMultipleContainer'),

            mixins: [
                Wjs.getType('Activatable')
            ],

            onBeforeTypeDefined: function () {

                Wjs.define({

                    type: 'AccordionItem',

                    internal: {

                        base: Wjs.getType('Panel'),

                        initialize: function () {
                            var header = this.getHeader();

                            this.expandedIcon = 'wjs-accordion-expanded-icon';

                            this.collapsedIcon = 'wjs-accordion-collapsed-icon';

                            header.addEvent('click', function (evt) {
                                var panel = this.getParent();

                                panel.getParent().expand(panel);
                            });

                            header.addClass('wjs-clickable');

                            // Add a tool to show the collapsed or expanded icon in the header
                            this.tool = Wjs.new('Tool')

                                .addClass(this.collapsedIcon); // Tool is initially "collapsed"

                            header.addTool(this.tool);

                            this.getBody().hide(); // Body is initially hidden

                            this.addClass('wjs-accordion-item');
                        }
                    },

                    setExpandedIcon: function (expandedIcon) {

                        this.expandedIcon = expandedIcon;

                        return this;
                    },

                    setCollapsedIcon: function (collapsedIcon) {

                        this.collapsedIcon = collapsedIcon;

                        return this;
                    },

                    expand: function () {

                        this.tool.replaceClass(this.collapsedIcon, this.expandedIcon);

                        this.getBody().show();
                    },

                    collapse: function () {

                        this.tool.replaceClass(this.expandedIcon, this.collapsedIcon);

                        this.getBody().hide();
                    }
                });

            },

            initialize: function () {
                var me = this;

                
            }
        },

        defaultItemType: 'AccordionItem',

        addChildItem: function (title, content) {
            var item = Wjs.new(this.defaultItemType)
                            .setTitle(title)
                            .addBodyItem(content);

            this.addItem(item);

            if (this.childItemAddedHandler) {

                this.childItemAddedHandler(item);
            }

            return this;
        },

        // Handles the item (not the accordion item) when it is added
        onChildItemAdded: function (fcn) {

            this.childItemAddedHandler = Wjs.chain(this.childItemAddedHandler, fcn);

            return this;
        },

        expand: function (item) {

            this.activate(item);

            return this;
        },

        activateHandler: function (item) {

            item.expand();
        },

        deactivateHandler: function (item) {

            item.collapse();
        },

        collapseAll: function () {

            this.getItems().forEach(function (item) {

                item.collapse();
            },
            this);
        }
    });

});